<template>

  <div class="user d-b-s">
    <div class="left">
      <el-form size="small" :label-width="50" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="职业">
          <el-select size="small" ref="career_id" @change="careerChange" v-model="searchForm.career_id"
            placeholder="请选择">
            <el-option v-for="(item, index) in positionList" :key="index" :label="item.title"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别">
          <el-select size="small" ref="level_id" @change="levelChange" v-model="searchForm.level_id" placeholder="请选择">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select size="small" ref="direction_id" @change="directionChange" v-model="searchForm.direction_id"
            placeholder="请选择">
            <el-option v-for="(item, index) in directionList" :key="index" :label="item.title"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <div class="add-outline" v-if="searchForm.direction_id">
          <el-button size="small" type="primary" @click="addOutlineClick">新增大纲</el-button>
        </div>
        <div class="outline-tree" v-if="searchForm.direction_id">
          <el-tree :data="treeData" ref="tree" check-on-click-node :check-strictly="true" show-checkbox node-key="id" @check="handleCheck"
            default-expand-all :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ data.title }}</span>
                <span>
                  <el-button type="text" style="margin-left: 10px;" size="mini" @click="editOutlineClick(data)">
                    <el-icon>
                      <EditPen></EditPen>
                    </el-icon>
                  </el-button>
                  <el-button type="text" size="mini" style="margin-left: 10px;" @click="deleteOutlineClick(data)">
                    <el-icon>
                      <Delete></Delete>
                    </el-icon>
                  </el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </el-form>
    </div>
    <div class="right" v-if="searchForm.direction_id">
      <!--搜索表单-->
      <div class="tab_list d-s-c">
        <div :class="['tab_span', { tab_span_select: types === 1 }]" @click="typesChange(1)">试题管理</div>
        <div :class="['tab_span', { tab_span_select: types === 2 }]" @click="typesChange(2)">课件管理</div>
      </div>
      <div class="statistics d-b-c ww100" v-if="types === 1">
        <div class="statistics_item d-c-c">
          <div class="item_left inline-block"><img src="../../../../static/imgs/icon1.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">全部</div>
            <div class="right_value">{{ allNum.total_count || 0 }}道</div>
          </div>
        </div>
        <div class="statistics_item d-c-c">
          <div class="item_left"><img src="../../../../static/imgs/icon2.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">单选</div>
            <div class="right_value">{{ allNum.single_choice_count || 0 }}道</div>
          </div>
        </div>
        <div class="statistics_item d-c-c">
          <div class="item_left"><img src="../../../../static/imgs/icon3.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">多选</div>
            <div class="right_value">{{ allNum.multiple_choice_count || 0 }}道</div>
          </div>
        </div>
        <div class="statistics_item d-c-c">
          <div class="item_left"><img src="../../../../static/imgs/icon4.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">判断</div>
            <div class="right_value">{{ allNum.judgment_count || 0 }}道</div>
          </div>
        </div>
        <div class="statistics_item d-c-c">
          <div class="item_left"><img src="../../../../static/imgs/icon5.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">真题</div>
            <div class="right_value">{{ allNum.real_exam_count || 0 }}道</div>
          </div>
        </div>
        <div class="statistics_item d-c-c">
          <div class="item_left"><img src="../../../../static/imgs/icon6.png" alt=""></div>
          <div class="item_right">
            <div class="right_label">普通题</div>
            <div class="right_value">{{ allNum.normal_count || 0 }}道</div>
          </div>
        </div>
      </div>
      <div class="common-content" style="padding-top: 4px;" v-if="types === 1">
        <div class="common-level-rail">
        </div>
        <div>
          <el-form size="small" :inline="true" :model="rightForm" class="demo-form-inline">
            <el-row>
              <el-col :span="7">
                <el-form-item label="题目">
                  <el-input size="small" style="max-width: 180px;" v-model="rightForm.search" maxlength="10"
                    placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="题目类型">
                  <el-select size="small" style="max-width: 180px;" ref="question_type"
                    v-model="rightForm.question_type" placeholder="请选择">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="(item, index) in optionList" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="分类">
                  <el-select size="small" style="max-width: 180px;" ref="category_id" v-model="rightForm.category_id"
                    placeholder="请选择">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="普通题" :value="1"></el-option>
                    <el-option label="真题" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="d-b-s">
          <div class="common-level-rail">
            <el-button size="small" type="primary" @click="addQuestionClick">新增试题</el-button>
            <el-button size="small" type="primary" @click="openImport">导入试题</el-button>
            <el-button size="small" type="text" @click="downloadStudentTemplate">下载导入模板</el-button>
          </div>
          <div class="common-level-rail d-c-c" style="width: 50px;">
            <!-- <span>题目</span>
            <el-input size="small" style="width: 161px;margin: 0 10px;" v-model="searchForm.search"
              placeholder="请输入"></el-input> -->
            <!-- <el-button size="small" type="primary" @click="onSubmit">查询</el-button> -->
          </div>
        </div>
        <!--内容-->
        <div class="product-content">
          <div class="table-wrap">
            <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
              <el-table-column min-width="200" align="center" show-overflow-tooltip prop="title"
                label="题目"></el-table-column>
              <el-table-column min-width="100" align="center" prop="type_name" label="题型"></el-table-column>
              <el-table-column min-width="100" align="center" prop="category_id" label="分类">
                <template #default="scope">
                  <span>{{ scope.row.category_id == 1 ? '普通题' : scope.row.category_id === 3 ? '真题' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column min-width="180" align="center" prop="outline" show-overflow-tooltip
                label="所属大纲"></el-table-column>
              <el-table-column align="center" fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button @click="editQuestionClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--分页-->
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
            :total="totalDataNumber"></el-pagination>
        </div>
      </div>
      <div class="common-content" style="padding-left: 0;" v-if="types === 2 && searchForm.outline_id && levels === 2">
        <el-form size="small" ref="form1" :model="form" :rules="formRules" label-width="100">
          <el-form-item label="课程简介" prop="abstract">
            <el-input style="width: 400px;" maxlength="20" v-model="form.abstract" placeholder="请输入" type="textarea" />
          </el-form-item>
          <el-form-item label-width="100" style="width: 400;" label="课件视频" prop="video_link">
            <el-upload :file-list="fileList" ref="uploadRefs" :http-request="httpRequest" :on-exceed="handleExceed"
              :limit="1">
              <el-button type="primary" style="width: 120px;" :loading="uploadLoading">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label-width="100">
            <el-button type="primary" @click="onSubmitCourse" :loading="loadingCourse">提 交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 新增或编辑大纲 -->
    <AddOutline :targetForm="searchForm" :directionTitle="this.$refs.direction_id.selectedLabel" v-if="open_addoutline"
      ref="open_addoutline" :setParams="setParams" @close="closeOutlineAdd"></AddOutline>
    <el-dialog title="删除大纲" style="width: 251px;" modal-class="dialog-add" v-model="dialogVisible"
      @close="dialogVisible = false" :close-on-click-modal="false" :close-on-press-escape="false">
      是否确定要删除大纲？
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="outlineDelete()" :loading="deleteloading">是</el-button>
          <el-button @click="dialogVisible = false">否</el-button>
        </div>
      </template>
    </el-dialog>
    <ImportCourseware v-if="open_edit" @close="closeEdit"></ImportCourseware>
    <el-dialog class="importList" v-model="visible" :show-close="false" width="1000">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header d-b-c">
          <el-button size="small" type="primary" @click="downLoadExcel">导出</el-button>
          <el-button type="text">
            <el-icon @click="visible = false">
              <Close style="color: #333" />
            </el-icon>
          </el-button>
        </div>
      </template>
      <div style="padding-bottom: 10px;">成功{{ successInfo.successCount || 0 }}条，失败{{ successInfo.failureCount || 0 }}条
      </div>
      <el-table size="small" :data="failureReasons" style="width: 100%" height="400">
        <el-table-column align="center" min-width="200" show-overflow-tooltip prop="title" label="题目"></el-table-column>
        <el-table-column align="center" min-width="120" show-overflow-tooltip prop="optionItem"
          label="选项"></el-table-column>
        <el-table-column align="center" min-width="120" prop="answer" label="答案"></el-table-column>
        <el-table-column align="center" min-width="120" prop="question_type" label="题目题型">
          <template #default="scope">
            <span>{{ scope.row.question_type == 1 ? '单选' : scope.row.question_type === 2 ? '多选' : '判断' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" prop="category_id" label="分类">
          <template #default="scope">
            <span>{{ scope.row.category_id == 1 ? '普通题' : scope.row.category_id === 3 ? '真题' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="180" align="center" prop="outline" label="所属大纲"></el-table-column>
        <el-table-column align="center" min-width="80" prop="import_results" label="导入结果"></el-table-column>
        <el-table-column align="center" min-width="180" prop="failure_reason" label="失败原因"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 新增或编辑试题 -->
    <AddQuestion :targetForm="searchForm" v-if="open_question" ref="open_question" :setParams="setParams"
      @close="closeQuestionAdd"></AddQuestion>
    <el-dialog title="删除试题" style="width: 251px;" modal-class="dialog-add" v-model="dialogVisible1"
      @close="dialogVisible1 = false" :close-on-click-modal="false" :close-on-press-escape="false">
      是否确定要删除试题？
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="delQuestion()" :loading="deleteloading">是</el-button>
          <el-button @click="dialogVisible1 = false">否</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import PositionApi from '@/api/position.js';
import CourseApi from '@/api/course.js';
import AddOutline from './dialog/AddOutline.vue';
import AddQuestion from './dialog/AddQuestion.vue';
import ImportCourseware from './dialog/ImportCourseware.vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
export default {
  components: {
    ImportCourseware,
    AddOutline,
    AddQuestion
  },
  inject: ['reload'],
  data() {
    return {
      optionList: [
        {
          label: '单选',
          value: 1
        },
        {
          label: '多选',
          value: 2
        },
        {
          label: '判断',
          value: 3
        }
      ],
      allNum: {},
      treeData: [],
      open_addoutline: false,
      /*是否加载完成*/
      loading: true,
      /*角色是否加载完成*/
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 10,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      curModel: {},
      /*角色列表*/
      roleList: [],
      searchForm: {
        title: '',
        career_id: '',
        level_id: '',
        direction_id: '',
        appraisal_id: '',
        outline_id: ''
      },
      rightForm: {
        search: '',
        question_type: '0',
        category_id: '0'
      },
      positionList: [], //全部职业
      levelList: [],
      directionList: [],
      appraisalList: [],
      dialogVisible: false,
      deleteloading: false,
      setParams: {},
      course_id: '',
      outline_id: '',
      types: 1,
      lastCheckedKey: null,
      form: {
        video_type: 2,
        abstract: '',
        video_link: ''
      },
      /*form验证*/
      formRules: {
        title: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        abstract: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
      },
      fileList: [],
      uploadLoading: false,
      loadingCourse: false,
      // 导入试题
      ...{
        failureReasons: [],
        successInfo: {},
        visible: false,
      },
      //试题
      ...{
        dialogVisible1: false,
        question_id: '',
        open_question: false
      },
      levels: ''
    };
  },
  created() {
    this.getPositionAll()
  },
  methods: {
    handleCustomClick(node, data) {
      // 模拟复选框点击或直接设置选中状态，如上所述的方法1或方法2中的实现。
      this.$refs.tree.setChecked(node.data, !node.checked, true); // 切换选中状态或使用其他逻辑。
      // this.$refs.tree.handleCheck
    },
    handleExceed(file) {
      console.log(file, 'file')
      this.$refs.uploadRefs.clearFiles()
      this.$refs.uploadRefs.handleStart(file[0])
      this.httpRequest({ file: file[0] })
    },
    downLoadExcel() {
      let data = []
      this.failureReasons.forEach(item => {
        if (item.import_results === '失败') {
          data.push({
            '题目': item.title,
            '选项': item.optionItem,
            '答案': item.answer.join(),
            '解析': item.analysis,
            '题目类型': item.question_type === 1 ? '单选' : item.question_type === 2 ? '多选' : '判断',
            '分类': item.category_id === 1 ? '普通题' : item.category_id === 3 ? '真题' : '',
            '所属大纲': item.outline,
            '失败原因': item.failure_reason,
          })
        }
      })
      this.exportToExcel(data, '学员导入失败表格')
    },
    exportToExcel(data, fileName) {
      // 将数据转换为工作表
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

      // 生成Excel文件
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 将Excel文件保存到客户端
      const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
      saveAs(dataBlob, fileName + '.xlsx');
    },
    // 获取所有题目数量
    getQuestionStatistics() {
      console.log(111)
      if (!this.searchForm.direction_id) {
        this.tableData = []
        this.totalDataNumber = 0
        return false
      }
      let Params = {
        ...this.searchForm
      };
      CourseApi.getQuestionStatistics(Params, true).then(res => {
        if (res.code == 1) {
          this.allNum = res.data
        }
      })
    },
    // 课件
    httpRequest(data) {
      if (!data.file) return
      console.log(data.file)
      this.uploadLoading = true
      let formData = new FormData()
      formData.append('iFile', data.file)
      formData.append('file_type', 'video')
      CourseApi.batchImport(formData).then(res => {
        this.uploadLoading = false
        if (res.code == 1) {
          this.fileList = [{
            name: res.data.real_name,
            url: res.data.file_path
          }]
        }
      }).catch(error => {
        this.$refs.uploadRefs.clearFiles()
        this.fileList = []
        this.uploadLoading = false
      });
    },
    onSubmitCourse() {
      console.log(this.fileList, 'file')
      if (!this.fileList || !this.fileList.length) {
        ElMessage({
          message: '请上传课件视频',
          type: 'error'
        });
        return
      }
      this.$refs.form1.validate(valid => {
        console.log(valid, 'valid')
        if (valid) {
          let self = this;
          self.loadingCourse = true;
          let params = {
            abstract: this.form.abstract,
            career_id: this.searchForm.career_id,
            career_title: this.$refs.career_id.selectedLabel,
            level_id: this.searchForm.level_id,
            level_title: this.$refs.level_id.selectedLabel,
            direction_id: this.searchForm.direction_id,
            direction_title: this.$refs.direction_id.selectedLabel,
            outline_id: this.searchForm.outline_id,
            title: this.searchForm.outline_title
          };
          params.video_type = 2
          params.video_link = this.fileList[0].url
          let key = 'addCourseware'
          let msg = '新增成功'
          if (self.searchForm.course_id) {
            key = 'updateCourseware'
            msg = '更新成功'
            params.course_id = self.searchForm.course_id
          }
          CourseApi[key](params, true)
            .then(data => {
              self.loadingCourse = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              if (data.data.course_id) {
                self.searchForm.course_id = data.data.course_id
                self.getCourseware(true);
              } else {
                this.form.abstract = ''
                this.fileList = []
              }
            })
            .catch(error => {
              self.loadingCourse = false;
            });
        }
      });
    },
    // 勾选节点
    handleCheck(node, checked) {
      if (this.lastCheckedKey && this.lastCheckedKey !== node.id) {
        this.$refs.tree.setChecked(this.lastCheckedKey, false);
      }
      this.lastCheckedKey = node.id;
      if (checked.checkedKeys && checked.checkedKeys.length) {
        this.searchForm.outline_id = node.id
        this.searchForm.outline_title = node.title
        this.searchForm.course_id = node.course_id
        this.levels = node.levels
        if (this.searchForm.course_id) {
          this.getCourseware()
        } else {
          this.searchForm.course_id = ''
          this.form = {
            video_type: 2,
            abstract: '',
            video_link: ''
          }
          this.fileList = []
        }
      } else {
        this.searchForm.outline_id = ''
        this.searchForm.outline_title = ''
        this.searchForm.course_id = ''
        this.levels = ''
      }
      this.rightForm = {
        search: '',
        question_type: '0',
        category_id: '0'
      },
        this.getQuestionStatistics()
      this.curPage = 1;

      this.getTableList()
    },
    // 获取课件信息
    getCourseware() {
      CourseApi.getCourseware({
        course_id: this.searchForm.course_id
      }).then(res => {
        if (res.code == 1) {
          this.form = {
            video_type: 2,
            abstract: res.data.abstract,
            video_link: res.data.video_link
          }
          this.fileList = [{
            name: '课件视频',
            url: res.data.video_link
          }]
        }
      })
    },
    // 下载模板
    downloadStudentTemplate() {
      window.open('https://edu.theshy.site/admin/%E5%AF%BC%E5%85%A5%E8%AF%95%E9%A2%98%E6%A8%A1%E7%89%88.xlsx')
    },
    typesChange(type) {
      this.types = type
    },
    // 打开新增大纲弹窗
    addOutlineClick() {
      this.open_addoutline = true
    },
    /*打开编辑大纲*/
    editOutlineClick(row) {
      this.open_addoutline = true;
      this.$nextTick(() => {
        this.$refs.open_addoutline.setTitle({
          id: row.id,
          parent_id: row.parent_id,
          title: row.title,
          ids: row.ids || ''
        })
      })
    },
    // 关闭新增或编辑大纲
    closeOutlineAdd(e) {
      this.open_addoutline = false;
      if (e && e.type == 'success') {
        this.getTreeList();
      }
    },
    /*删除大纲*/
    deleteOutlineClick(row) {
      this.outline_id = row.id;
      this.dialogVisible = true;
    },
    // 确认删除大纲
    outlineDelete() {
      let self = this;
      self.deleteloading = true;
      CourseApi.outlineDelete(
        {
          id: self.outline_id
        },
        true
      )
        .then(data => {
          self.deleteloading = false;
          if (data.code == 1) {
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            self.getTreeList();
            this.dialogVisible = false;
          } else {
            self.deleteloading = false;
          }
        }).catch(error => {
          self.deleteloading = false;
        })
    },
    careerChange() {
      this.searchForm.level_id = ''
      this.levelList = []
      this.searchForm.direction_id = ''
      this.directionList = []
      this.getLevelAll()
    },
    levelChange() {
      this.searchForm.direction_id = ''
      this.directionList = []
      this.getDirectionAll()
    },
    directionChange() {
      this.searchForm.outline_id = ''
      this.getTreeList()
      this.getQuestionStatistics()
      this.curPage = 1;
      this.getTableList()
    },
    getPositionAll() {
      PositionApi.getNestedData({}, true)
        .then(res => {
          if (!this.searchForm.career_id) {
            this.searchForm.career_id = res.data && res.data[0] && res.data[0].id ? res.data[0].id : ''
            if (this.searchForm.career_id) {
              this.getLevelAll()
            }
          }
          this.positionList = res.data;
        })
        .catch(error => { });
    },
    getLevelAll() {
      PositionApi.getCareerLevel({
        career_id: this.searchForm.career_id
      }, true)
        .then(data => {
          this.searchForm.level_id = data.data && data.data[0] && data.data[0].id ? data.data[0].id : ''
          if (this.searchForm.level_id) {
            this.getDirectionAll()
          }
          this.levelList = data.data;
        })
        .catch(error => { });
    },
    getDirectionAll() {
      PositionApi.getCareerDirection({
        career_id: this.searchForm.career_id,
        level_id: this.searchForm.level_id
      }, true)
        .then(data => {
          this.directionList = data.data;
          this.searchForm.direction_id = data.data && data.data[0] && data.data[0].id ? data.data[0].id : ''
          console.log(this.searchForm.direction_id, 'data123')
          if (this.searchForm.direction_id) {
            console.log('data123')
            this.getTreeList();
            this.getTableList()
            this.getQuestionStatistics()
          }

        })
        .catch(error => { });
    },
    getTreeList() {
      let self = this;
      let Params = {
        career_id: this.searchForm.career_id,
        level_id: this.searchForm.level_id,
        direction_id: this.searchForm.direction_id
      };
      CourseApi.getNestedData(Params, true)
        .then(data => {
          this.searchForm.outline_id = ''
          self.loading = false;
          self.treeData = data.data;
          self.treeData && self.treeData.map(item => {
            item.parent_id = 0
            item.levels = 0
            item.children && item.children.map(childrenItem => {
              childrenItem.parent_id = item.id
              childrenItem.levels = 1
              childrenItem.children && childrenItem.children.map(grandsonItem => {
                grandsonItem.ids = item.id
                grandsonItem.parent_id = childrenItem.id
                grandsonItem.levels = 2
                return grandsonItem
              })
              return childrenItem
            })
            return item
          })
        })
        .catch(error => { });
    },
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*获取列表*/
    getTableList() {
      if (!this.searchForm.direction_id) {
        self.tableData = []
        self.totalDataNumber = 0
        return false
      }
      let self = this;
      let Params = {
        ...self.searchForm,
        ...self.rightForm
      };
      Params.page = self.curPage;
      Params.list_rows = self.pageSize;
      CourseApi.getQuestionList(Params, true)
        .then(data => {
          self.loading = false;
          self.tableData = data.data.list.data;
          self.totalDataNumber = data.data.list.total;
        })
        .catch(error => { });
    },
    openImport() {
      this.open_edit = true;
    },
    /*关闭添加*/
    closeEdit(e) {
      this.open_edit = false;
      if (e && e.type == 'success') {
        this.successInfo = e.data || {}
        this.failureReasons = e.data && e.data.failureReasons || []
        const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
        this.failureReasons.map(item => {
          let optionItem = []
          item.option && item.option.forEach((item, index) => {
            optionItem.push(keys[index]
              + '.' + item.content)
          })
          item.optionItem = optionItem
          return item
        })
        this.visible = true
        this.getTableList();
        this.getQuestionStatistics()
      } else {
        this.open_edit = false;
      }
    },
    // 打开新增试题弹窗
    addQuestionClick() {
      this.open_question = true
    },
    /*打开编辑试题*/
    editQuestionClick(row) {
      this.open_question = true;
      console.log(row, 'row')
      this.$nextTick(() => {
        this.$refs.open_question.setTitle({
          ...row
        })
      })
    },
    // 关闭新增或编辑试题
    closeQuestionAdd(e) {
      this.open_question = false;
      if (e && e.type == 'success') {
        this.getQuestionStatistics();
        this.getTableList()
      }
    },
    /*删除试题*/
    deleteClick(row) {
      this.question_id = row.question_id;
      this.dialogVisible1 = true;
    },
    // 确认删除试题
    delQuestion() {
      let self = this;
      self.deleteloading = true;
      CourseApi.delQuestion(
        {
          question_id: self.question_id
        },
        true
      )
        .then(data => {
          self.deleteloading = false;
          if (data.code == 1) {
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            self.getTableList();
            this.getQuestionStatistics()
            this.dialogVisible1 = false;
          } else {
            self.deleteloading = false;
          }
        }).catch(error => {
          self.deleteloading = false;
        })
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  min-height: calc(100vh - 90px);

  .left {
    padding: 20px 0 20px 20px;
    background: #fff;
    min-width: 266px;
    width: 266px;
    margin-right: 13px;
    height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .right {
    overflow-y: auto;
    height: calc(100vh - 90px);
    width: calc(100% - 279px);
  }
}

.tree {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.app-btn {
  cursor: pointer;
  width: 216px;
  min-height: 31px;
  background: #FFFFFF;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #DCDCDC;
  margin-bottom: 13px;
  text-align: center;
  line-height: 31px;
  overflow: hidden;
  /* 确保超出容器的文本被裁剪 */
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  text-overflow: ellipsis;
  /* 使用省略号表示文本溢出 */
}

.app-btn-select {
  border: 1px solid #3A6AE2;
  color: #3A6AE2;
}

.add-outline {
  margin-left: 8px;
  margin-bottom: 20px;
}

.tab_list {
  cursor: pointer;
  padding: 0 20px;
  background: #FFFFFF;
  border-radius: 4px 4px 0 0;
}

.tab_span {
  width: 56px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 2px;
  border-bottom: 2px solid #ffffff;
  margin-right: 30px;
}

.tab_span_select {
  border-bottom: 2px solid #3A6AE2;
}

.statistics {
  padding-left: 40px;
  height: 89px;
  background: #FFFFFF;
  border-radius: 0 0 4px 4px;
  overflow-x: auto;
  margin-bottom: 13px;
}

.statistics_item {
  font-size: 13px;
  color: #333333;
  font-weight: bold;
  margin-right: 5px;

  .item_left {
    width: 31px;
    height: 31px;

    img {
      width: 100%;
      height: 100%;
    }

    margin-right: 16px;
  }

  .item_right {
    min-width: 80px;
    width: 80px;
    font-size: 11px;
    font-weight: 400;
  }
}
</style>